import React, {useEffect, useState} from 'react'
import {View, Text} from '@tarojs/components'
import {AtButton, AtCard} from 'taro-ui'
import Taro, {useRouter} from "@tarojs/taro"
import {PaperResultPo} from "../../types";
import {getEnv} from "../../env";
import { transTime } from '../../util/util';
import './index.scss'


function calculationAccuracy(paperResultPo: PaperResultPo): string {
  const count = paperResultPo.questions.length
  const zi = paperResultPo.questions.filter(item => item.status === 1).length
  return (zi / count).toFixed(2)
}

export default () => {
  const paperResultId = useRouter().params.paperResultId ?? 13
  const paperName = useRouter().params.paperName ?? "未知试卷"
  const [paperResultPo, setPaperResultPo] = useState<PaperResultPo | null>(null)

  useEffect(() => {
    Taro.request({
      url: `${getEnv().baseUrl}/paper/result/${paperResultId}`,
      method: "GET"
    }).then(({data}) => {
      data.questions = JSON.parse(data.questions);
      setPaperResultPo(data)
    })
  }, [paperResultId])

  if (!paperResultPo) return null
  return <View>
    <View className='main'>
      {/*顶部*/}
      <View className='title wing-blank'>
        <View className='title-left'>
          <Text>{paperName}</Text>
          <Text className='title-left-bottom'>交卷时间：{paperResultPo?.createTime}</Text>
        </View>
        <View className='title-right'>
          <AtButton size='small' circle onClick={() => Taro.redirectTo({
            url: `/pages/testPaperContent/index?paperId=${paperResultPo?.paperId}`
          })}
          >重新练习</AtButton>
        </View>
      </View>
      {/*中间*/}
      <View className='midd'>
        <View className='midd-item'>
          <Text>{paperResultPo.questions.filter(item => item.status === 1).length}/{paperResultPo.questions.length}</Text>
          <Text className='midd-item-bottom'>正确题数</Text>
        </View>
        <View className='midd-d'></View>
        <View className='midd-item'>
          <Text>{calculationAccuracy(paperResultPo)}%</Text>
          <Text className='midd-item-bottom'>正确率</Text>
        </View>
        <View className='midd-d'></View>
        <View className='midd-item'>
          <Text>{transTime(paperResultPo.useTime)}</Text>
          <Text className='midd-item-bottom'>用时</Text>
        </View>
      </View>
      {/*底部*/}
      <View className='footer'>
        <AtCard
          title='答题卡'
          icon={{
            value: "edit",
            size: 20
          }}
        >
          <View className='card'>
            {
              paperResultPo.questions.map((item, index) => {
                return <View className='card-item' key={index} onClick={() => Taro.navigateTo({
                  url: `/pages/testPaperContent/index?paperId=${paperResultPo?.paperId}&paperResultId=${paperResultId}&analysis=all&initIndex=${index}`
                })}
                >
                  <SubjectResultCell num={index + 1}
                    type={item.status === 1 ? SubjectResultCellTypeEnum.RIGHT : item.status === 0 ? SubjectResultCellTypeEnum.WRONG : undefined}
                  />
                </View>
              })
            }
          </View>
        </AtCard>
      </View>
    </View>
    {/*  操作*/}
    <View className='other'>
      <View className='other-content'>
        <View className='other-content-item' onClick={() => Taro.navigateTo({
          url: `/pages/testPaperContent/index?paperId=${paperResultPo?.paperId}&paperResultId=${paperResultId}&analysis=all`
        })}
        >
          全部解析
        </View>
        <View className='other-content-item other-content-item-active' onClick={() => Taro.navigateTo({
          url: `/pages/testPaperContent/index?paperId=${paperResultPo?.paperId}&paperResultId=${paperResultId}&analysis=wrong`
        })}
        >
          错题解析
        </View>
      </View>
    </View>
  </View>
}

export enum SubjectResultCellTypeEnum {
  RIGHT,
  WRONG
}

export interface SubjectResultCellProps {
  type?: SubjectResultCellTypeEnum,
  num: number;
}

export const SubjectResultCell = (props: SubjectResultCellProps) => {
  let className = "subject-result-cell ";
  if (props.type === SubjectResultCellTypeEnum.RIGHT) className += "subject-result-cell-right"
  if (props.type === SubjectResultCellTypeEnum.WRONG) className += "subject-result-cell-wrong"
  return <View className={className}>
    <Text>{props.num}</Text>
  </View>
}


